<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>watch深度监听</title>
  <div id='root'>
      <!-- 
            1.vue中的watch 默认不监听对象内部的属性变化(一层监听)
            2.配置deep: true 可以监听对象内部值改变(多层监听)

       -->
      <button @click = "numbers.a++" >numbers.a ++ </button>
      <button @click = "numbers.b++" >numbers.b ++ </button>
      <button @click = "numbers = {a:123,b:456}" >改变number对象 </button>
  </div>
</head>
<body>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
   // 设置为 false 以阻止 vue 在启动时生成生产提示。
   Vue.config.productionTip = false
  // 创建一个vue实例
  const vm = new Vue({
    // el -> element 用于指定当前vue对象绑定哪个容器,值通常为css选择器字符串
    el: '#root',
    // data 用于存储数组,数据供el所指定的容器去使用 
    data: {
      numbers: {
        a: 1,
        b: 2
      }
    }, 
    computed:{
    },
    watch: {
      numbers:{
         deep: true,
         handler(newVal, oldvar) {
            console.log("number改变", newVal, oldvar)
        }
      },
      // 简写
      // numbers(newVal, oldvar) {
      //   console.log("number改变", newVal, oldvar)
      // }
    }
  });

</script>
</body>
</html>